<script setup lang="ts">
import {useClassName} from '@project/utils'

defineOptions({name: 'ProList'})

const {cls} = useClassName('items')
</script>

<template>
  <ul :class="cls()">
    <li :class="cls('li')" v-for="num in 4" :key="num">
      {{ num }} - item{{ num }}
    </li>
  </ul>
</template>

<style scoped>
.pro-items {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  list-style: none;
}

.pro-items-li {
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
</style>